<template>
  <view>
    <MySearch></MySearch>
    <view class="cate">
      <scroll-view class="cate-left" scroll-y>
        <view
          class="cate-left-item"
          @click="changeIndex(index)"
          v-for="(item, index) in leftList"
          :key="item.cat_id"
          :class="{ active: index === activeIndex }"
          >{{ item.cat_name }}
        </view>
      </scroll-view>
      <scroll-view
        class="cate-right"
        scroll-y
        :scroll-into-view="'biaoji' + activeIndex"
      >
        <view :id="'biaoji' + activeIndex"></view>
        <view class="group" v-for="item in rightList" ::key="item.cat_id">
          <!-- 分组标题 -->
          <view class="group-title"> {{ item.cat_name }} </view>
          <!-- 分组标题中对应列表，图片+文本 -->
          <view class="group-list">
            <navigator
              :url="`/pages/goods_list/goods_list?cid=${goods.cat_id}&query=${goods.cat_name}`"
              open-type="navigate"
              v-for="goods in item.children"
              ::key="goods.cat_id"
            >
              <image :src="goods.cat_icon" lazy-load mode="aspectFit" />
              <text>{{ goods.cat_name }}</text>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      cateList: [],
    };
  },
  methods: {
    changeIndex(index) {
      this.activeIndex = index;
    },
    async getCateList() {
      const [error, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/categories",
        method: "GET",
      });
      if (!error) {
        this.cateList = res.data.message;
      } else {
        console.log(error);
      }
    },
  },
  onLoad() {
    this.getCateList();
  },
  //   计算属性
  computed: {
    leftList() {
      // ({ cat_name, cat_id }) 箭头函数解构形参，({ cat_name, cat_id })右边是返回对象
      return this.cateList.map(({ cat_name, cat_id }) => ({
        cat_name,
        cat_id,
      }));
    },
    // 根据高亮下标，计算出右侧对应列表
    rightList() {
      return this.cateList.length > 0
        ? this.cateList[this.activeIndex].children
        : [];
    },
  },
};
</script>

<style lang="scss">
.cate {
  display: flex;
  .cate-left {
    .cate-left-item {
      height: 100rpx;
      background-color: #f3f3f3;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    width: 182rpx;
    height: calc(100vh - 88rpx);
    .active {
      background-color: #fff;
      color: #ea4350;
      &::before {
        content: "";
        width: 4rpx;
        height: 44rpx;
        background-color: #ea4350;
        position: absolute;
        left: 0;
      }
    }
  }
  .cate-right {
    flex: 1;
    height: calc(100vh - 88rpx);
    .group {
      .group-title {
        text-align: center;
        font-size: 26rpx;
        &::after,
        &::before {
          content: "/";
          color: #ccc;
          margin: 0 20rpx;
        }
      }
      .group-list {
        display: flex;
        flex-wrap: wrap;
        navigator {
          width: 33.3333%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          padding: 20rpx 0;
        }
        image {
          width: 120rpx;
          height: 120rpx;
        }
        text {
          font-size: 22rpx;
        }
      }
    }
  }
}
</style>
